<template>
    <div v-if="disStart && !disabled" class="dis-start-date-picker-border" :style="{ width: width }">
        <el-icon class="c-picker-icon">
            <Clock/>
        </el-icon>
        <el-text class="picker-start">{{ pickerStart }}</el-text>
        <span class="ph5 fz12">{{ rangeSeparator }}</span>
        <el-date-picker
            v-if="changePickerTypesStatus"
            v-model="pickerEnd"
            :editable="false"
            :clearable="false"
            :type="type"
            :format="format"
            :value-format="format"
            :placeholder="endPlaceholder"
            :disabled-date="disabledDate"
            @change="changeEndDate"
            style="width: 39%;"
        />
        <el-icon class="c-picker-icon">
            <CircleClose @click="clearEndDate" class="c-circle-close-icon"/>
        </el-icon>
    </div>
    <div v-else flex :style="{ width: width }">
        <el-date-picker
            v-if="changePickerTypesStatus"
            v-model="pickerDate"
            :disabled="disabled"
            :editable="false"
            :type="rangeType"
            :format="format"
            :value-format="format"
            :start-placeholder="startPlaceholder"
            :range-separator="rangeSeparator"
            :end-placeholder="endPlaceholder"
            :disabled-date="disabledDate"
            @change="changeDate"
        />
        <!--@calendar-change="calendarChange"-->
    </div>
</template>

<script setup lang="ts">
    import { nextTick, ref, watch } from "vue";
    import { Clock, CircleClose } from "@element-plus/icons-vue";
    import { useFormItem } from "element-plus"
    import { typeIsArray } from "@/utils";

    const { formItem } = useFormItem();

    const props = defineProps({
        modelValue: {
            type: Array,
            default: () => {
                return []
            }
        },
        disabledDate: {
            type: Function,
            default: () => {
            }
        },
        rangeType: {
            type: String,
            default: 'datetimerange'
        },
        format: {
            type: String,
            default: 'YYYY-MM-DD HH:mm'
        },
        startPlaceholder: {
            type: String,
            default: '开始时间'
        },
        rangeSeparator: {
            type: String,
            default: '-'
        },
        endPlaceholder: {
            type: String,
            default: '结束时间'
        },
        width: {
            type: String,
            default: '300px'
        },
        type: {
            type: String,
            default: 'datetime'
        },
        disStart: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update:modelValue', 'change']);

    let pickerDate = ref<string[]>([]);
    let pickerStart = ref('');
    let pickerEnd = ref('');

    const clearEndDate = () => {
        changeEndDate();
        formItem.validate('change').catch(() => {
        })
    }

    const changeEndDate = (date: null | string = null) => {
        let _value: string[] = [];
        if (date) {
            _value.push(pickerStart.value, date);
        }
        emitModelValue(_value);
    };

    const changeDate = (date: string[] | null) => {
        emitModelValue(date);
    };

    // 点击日期事件
    const calendarChange = (dates: ObjValueAny | null) => {
        if (dates && dates.length) {
            console.info(dates[0].getTime());
        }
    }

    const emitModelValue = (date: string[] | null = []) => {
        let _date = date || [];
        emit('update:modelValue', _date);
        emit('change', _date);
    };

    watch(() => props.modelValue as string[], (newValue: string[]) => {
        const isArray = typeIsArray(newValue);
        if (props.disStart && !props.disabled) {
            if (!pickerStart.value) {
                pickerStart.value = isArray && newValue.length ? newValue[0].slice(0, props.format.length) : '';
            }
            pickerEnd.value = isArray && newValue.length ? newValue[1] : '';
        } else {
            pickerDate.value = isArray ? newValue : [];
        }
    }, { immediate: true, deep: true });

    let changePickerTypesStatus = ref<boolean>(true);// 防止 format 不生效
    watch(() => props.format, () => {
        changePickerTypesStatus.value = false;
        nextTick(() => {
            changePickerTypesStatus.value = true;
        })
    })

    // const getPickerOptions = (type: string, date: string | string[] | null) => {
    //     if (typeIsString(date)) {
    //         // 禁用指定时间之前 不包括指定时间
    //         if (type === 'beforeDay') {
    //             return disBeforeDay(date as string)
    //         }
    //         // 禁用指定时间之前 包括指定时间
    //         if (type === 'nowBeforeDay') {
    //             return disNowBeforeDay(date as string)
    //         }
    //         // 禁用指定时间之后 不包括指定时间
    //         if (type === 'afterDay') {
    //             return disAfterDay(date as string)
    //         }
    //         // 禁用指定时间之后 包括指定时间
    //         if (type === 'nowAfterDay') {
    //             return disNowAfterDay(date as string)
    //         }
    //         return
    //     }
    //     if (typeIsArray(date)) {
    //         // 禁用开始时间之前和结束时间之后 不包括开始/结束时间
    //         if (type === 'rangeDay') {
    //             return disRangeDay(date as string[])
    //         }
    //         // 禁用开始时间之前和结束时间之后 包括开始开始时间 不包括结束时间
    //         if (type === 'startRangeDay') {
    //             return disStartRangeDay(date as string[])
    //         }
    //         // 禁用开始时间之前和结束时间之后 不包括开始开始时间 包括结束时间
    //         if (type === 'endRangeDay') {
    //             return disEndRangeDay(date as string[])
    //         }
    //         return
    //     }
    //     return
    // }
</script>

<style lang="scss">
    .el-form-item.is-error .dis-start-date-picker-border .el-input__wrapper,
    .el-form-item.is-error .dis-start-date-picker-border .el-input__wrapper.is-focus,
    .dis-start-date-picker-border .el-input__wrapper {
        box-shadow: none !important;
    }

    .el-form-item.is-error .dis-start-date-picker-border {
        box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }

    .dis-start-date-picker-border {
        padding: 0 10px;
        border-radius: var(--el-border-radius-base);
        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        background: linear-gradient(to right, var(--el-disabled-bg-color) 0%, var(--el-disabled-bg-color) 47.5%, transparent 47.5%, transparent 100%);

        .c-picker-icon {
            color: var(--el-text-color-placeholder);
            font-size: 14px;
        }

        .picker-start {
            width: 39%;
            color: var(--el-disabled-text-color);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            cursor: not-allowed;
        }

        .c-circle-close-icon {
            display: none;
            cursor: pointer;
        }

        &:hover {
            box-shadow: 0 0 0 1px var(--el-border-color-hover, var(--el-border-color)) inset;

            .c-circle-close-icon {
                display: block;
            }
        }

        .el-input__prefix {
            display: none;
        }

        .el-date-editor.el-input {
            height: auto;
        }

        .el-input__wrapper {
            padding: 0;

            .el-input__inner {
                text-align: center;
            }
        }
    }
</style>